<!--
 * @Author: daidai
 * @Date: 2022-03-01 14:13:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-27 15:04:49
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\right-top.vue
-->
<template>
	<Echart id="rightTop" :options="option" class="right_top_inner" v-if="pageflag" ref="charts" />
	<Reacquire v-else @onclick="getData" style="line-height: 200px">
		重新获取
	</Reacquire>
</template>

<script>
	import {
		currentGET
	} from "api/modules";
	import {
		graphic
	} from "echarts"
	export default {
		data() {
			return {
				option: {},
				pageflag: false,
			};
		},
		created() {

		},

		mounted() {
			this.getData();
		},
		beforeDestroy() {
			this.clearData();
		},
		methods: {
			clearData() {},
			getData() {
				currentGET("impSumPrice").then((res) => {
					if (res.flag) {
						this.pageflag = true;
						this.init(res.data.xData, res.data.yData, res.data.yData2);
					} else {
						this.pageflag = false;
						this.$Message({
							text: res.msg,
							type: "warning",
						});
					}
				});
			},
			init(xData, yData, yData2) {
				this.option = {
					xAxis: {
						type: "category",
						data: xData,
						boundaryGap: false, // 不留白，从原点开始
						splitLine: {
							show: true,
							lineStyle: {
								color: "rgba(31,99,163,.2)",
							},
						},
						axisLine: {
							// show:false,
							lineStyle: {
								color: "rgba(31,99,163,.1)",
							},
						},
						axisLabel: {
							color: "#7EB7FD",
							fontWeight: "500",
						},
					},
					yAxis: [{
							type: "value",
							name: '进口数量(万吨)',
							nameTextStyle: {
								color: "#7EB7FD",
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(31,99,163,.2)",
								},
							},
							axisLine: {
								lineStyle: {
									color: "rgba(31,99,163,.1)",
								},
							},
							axisLabel: {
								color: "#7EB7FD",
								fontWeight: "500",
							},
						}, {
							type: "value",
							name: '进口价格(元/斤)',
							nameTextStyle: {
								color: "#7EB7FD",
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: "rgba(31,99,163,.2)",
								},
							},
							axisLine: {
								lineStyle: {
									color: "rgba(31,99,163,.1)",
								},
							},
							axisLabel: {
								color: "#7EB7FD",
								fontWeight: "500",
							},
						}

					],
					tooltip: {
						trigger: "axis",
						backgroundColor: "rgba(0,0,0,.6)",
						borderColor: "rgba(147, 235, 248, .8)",
						textStyle: {
							color: "#FFF",
						},
					},
					grid: {
						//布局
						show: true,
						left: "10px",
						right: "30px",
						bottom: "10px",
						top: "38px",
						containLabel: true,
						borderColor: "#1F63A3",
					},
					series: [{
							data: yData,
							type: "line",
							smooth: true,
							symbol: "none", //去除点
							name: "进口数量",
							color: "rgba(252,144,16,.7)",
						},
						{
							data: yData2,
							type: "line",
							smooth: true,
							symbol: "none", //去除点
							name: "进口价格",
							color: "rgba(9,202,243,.7)",
							yAxisIndex: 1, //在单个图表实例中存在多个y轴的时候有用
						},
					],
				};
			},
		},
	};
</script>
<style lang='scss' scoped>
	.right_top_inner {
		margin-top: -8px;
	}
</style>